<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="drag.js"></script>
<style>
ul,li{list-style:none;user-select: none;}
ul{width:200px;}
li{margin-top: 10px;width:200px;height:30px;line-height: 30px;font-size:14px;padding:0 5px;border:1px solid #ccc;cursor:pointer;background: #F6F8FA;border: 1px solid #D3D9E0;border-radius: 2px;}
</style>
</head>
<body>
<ul class="options">
    <li class="option-list">1</li>
    <li class="option-list">2</li>
    <li class="option-list">3</li>
    <li class="option-list">4</li>
    <li class="option-list">5</li>
    <li class="option-list">6</li>
</ul>
</body>
<script>
    $(function(){
        $.KF_drag(".options",".option-list",{'border-color':'#1F8CEB','background':'green'});
    })
</script>
</html>
